

import React, { Component } from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  Image,
  Platform,
  ScrollView,
} from 'react-native';



import BasePage from '../common/BasePage';
import Colors from '../../common/Colors';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import TImage from '../../components/TImage';
import CommonSearchListPage from '../common/CommonSearchListPage';
import CommonCheckUserTypeAction from '../../actions/common/CommonCheckUserTypeAction';
import HeartLoveSearchConditionPage from './HeartLoveSearchConditionPage';
import HeartLoveSearchNickPage from './HeartLoveSearchNickPage';

const TOP_BTN_GROUP_LABELS = ["条件搜索", "精确搜索"];

export default class HeartLoveSearchMainPage extends CommonSearchListPage {
  constructor(props) {
    super(props);

    this.state.btnGroupSelectedIndex = 0;
    this._scrollView = null;
    this._pageWidth = SizeUtils.getWindowSize().width;
    this._clickTopBtnTimer = null;
    this.state.scrollEnabled =false
  }

  render() {
    return (
      <View style={{backgroundColor: Colors.White, paddingTop: Config.paddingTop,
          flexDirection: 'column', flex:1}}>
        { this._renderChildPage()}
        { this._renderNavigationBar()}
        { this._renderStatusBar() }
      </View>
    )
  }

    _dealEnterPage() {
      this.setState({
        scrollEnabled:true
      })

  }

  _renderNavigationBarTitle() {
    return (
      <View style={{flexDirection: 'row'}} >
        {this._renderTopBtnGroup()}
      </View>
    )
  }

  _onCheckIsUserCallback(result) {
    if(result) {
      this.gotoPage(Config.pages.workHard_write);
    }
  }

  _renderChildPage() {
    return(
      <ScrollView style={{width:this._pageWidth,
          height:SizeUtils.getWindowSize().height - Config.paddingTop}}
        ref={(ref) => this._scrollView = ref}
        horizontal={true}   // 水平方向
        showsHorizontalScrollIndicator={false}  // 水平指示器
        showsVerticalScrollIndicator={false}    // 垂直指示器
        pagingEnabled={true}    // 开启分页功能
        alwaysBounceHorizontal={false} //弹性拉动一截
        onScroll={this._onScroll.bind(this)}
        scrollEnabled={this.state.scrollEnabled}
      >
      <View style={{width:this._pageWidth}}>
         <HeartLoveSearchConditionPage  {...this.props} isInster={true} pageData={{...this.props.pageData,navigationBarHidden:false,showTitle:false,showLeftButton:false}}/> 
      </View>
      <View style={{width:this._pageWidth}}>
         <HeartLoveSearchNickPage  {...this.props} isInster={true} pageData={{...this.props.pageData,navigationBarHidden:false,showTitle:false,showLeftButton:false}}/> 
      </View>
      </ScrollView>
    )
  }

  _onScroll(event) {
    let x = event.nativeEvent.contentOffset.x;
    let index = Math.round(x / this._pageWidth);
    console.log("round", index, x / this._pageWidth, x, this._pageWidth);
    if(this.state.btnGroupSelectedIndex != index) {
      this.setState({
        btnGroupSelectedIndex:index,
      })
    }
  }

  _renderTopBtnGroup() {
    return (
      <View style={{flexDirection:"row", width:SizeUtils.translateDesignWidthToCode(280),
        justifyContent:"space-between",
        height:SizeUtils.translateDesignHeightToCode(45)}}>
        {this._getButton(0)}
        {this._getButton(1)}
      </View>
    )
  }

  _getButton(index) {
    return (
      <TouchableOpacity style={{width:SizeUtils.translateDesignWidthToCode(150), flexDirection:"column",
            alignItems:"center"}}
          onPress={() => this._onPressBtnGroup(index)}>
        <Text style={[styles.topBtnTextStyle, {fontSize:SizeUtils.translateFontSizeToCode(30),
          height:SizeUtils.translateDesignHeightToCode(40),
          width:SizeUtils.translateDesignWidthToCode(150), 
          color:this.state.btnGroupSelectedIndex == index ? "#000000": "#666666",
          backgroundColor:"#00000000", borderWidth:0,}]
            }>{TOP_BTN_GROUP_LABELS[index]}
        </Text>
        <View style={{borderColor:"#4581fa", borderBottomWidth:index == this.state.btnGroupSelectedIndex ? SizeUtils.translateDesignHeightToCode(5) : 0,
          width:SizeUtils.translateDesignWidthToCode(60), height:SizeUtils.translateDesignHeightToCode(20)}}>
        </View>
      </TouchableOpacity>
    )
  }

  _onShowUnderlay() {

  }

  setHorizontalDisable(){
      this.setState({
        scrollEnabled:false
      })
       // this._scrollView.scrollTo({x:this.state.btnGroupSelectedIndex * this._pageWidth});
  }

   setHorizontalEnable(){
      this.setState({
        scrollEnabled:true
      })
       // this._scrollView.scrollTo({x:this.state.btnGroupSelectedIndex  * this._pageWidth});
  }



  _onPressBtnGroup(selectedIndex) {

    if(this._clickTopBtnTimer) {
      return;
    }
      this.setState({
        scrollEnabled:true
      })

    this._clickTopBtnTimer = setTimeout(() => {
      this._clearClickTopBtnTimer();
    }, 300);
    this._scrollView.scrollTo({x:selectedIndex * this._pageWidth});
  }

  _clearClickTopBtnTimer() {
    this._clickTopBtnTimer && clearTimeout(this._clickTopBtnTimer)
    this._clickTopBtnTimer = null;
  }
}

var styles = StyleSheet.create({
  topBtnTextStyle: {
    textAlign:"center",
  },
});
